咒語:
幫我加上驗證邏輯 第一個要Email驗證 第二個英文混大小寫
在畫面中提示

<Box sx={{ mt: 2 }}>
          <TextField
            required
            fullWidth
            id="email"
            label="Email"
            name="email"
            autoComplete="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            error={!isValidEmail(email) && email.length > 0}
            helperText={isValidEmail(email) ? "" : "请输入有效的 Email 地址"}
          />
        </Box>
        <Box sx={{ mt: 2 }}>
          <TextField
            required
            fullWidth
            name="password"
            label="密碼"
            type="password"
            id="password"
            autoComplete="current-password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            error={!isValidPassword(password) && password.length > 0}
            helperText={
              isValidPassword(password) && password.length > 0
                ? "密码必须包含大小写字母和数字，并且至少 8 个字符"
                : ""
            }
          />
        </Box>

這邊會發現 他沒給驗證邏輯
把錯誤提示告訴他
咒語: isValidEmail is not defined

 function isValidEmail(email) {
    // 使用正则表达式验证邮箱格式
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    return emailPattern.test(email);
  }

  // 验证密码是否有效
  function isValidPassword(password) {
    // 密码必须包含大小写字母和数字，并且至少 8 个字符
    const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
    return passwordPattern.test(password);
  }

這裡就把輸入驗證完成了